<template>
  <div class="order-view">
    <van-nav-bar title="订单列表" />
    <van-tabs v-model="activeName" animated @click="loadData" ref="tabs">
      <van-tab title="全部" name="all">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          error-text="加载失败"
          @load="onAllLoad"
        >
          <div class="order-panel">
            <van-cell-group v-for="item in allList" :key="item.id">
              <van-cell :title="item.number" :value="item.status" />
              <div class="order-main">
                <div class="order-main-top">
                  <span class="order-title">{{item.title}}</span>
                  <span class="order-time">{{item.time}}</span>
                </div>
                <p class="order-description">{{item.description}}</p>
                <div class="order-main-bottom">
                  <span class="order-price">¥{{item.price}}</span>
                  <van-button plain type="info" size="small">{{item.action}}</van-button>
                </div>
              </div>
            </van-cell-group>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="未完成" name="noDone">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          error-text="加载失败"
          @load="onNoDoneLoad"
        >
          <div class="order-panel">
            <van-cell-group v-for="item in noDoneList" :key="item.id">
              <van-cell :title="item.number" :value="item.status" />
              <div class="order-main">
                <div class="order-main-top">
                  <span class="order-title">{{item.title}}</span>
                  <span class="order-time">{{item.time}}</span>
                </div>
                <p class="order-description">{{item.description}}</p>
                <div class="order-main-bottom">
                  <span class="order-price">¥{{item.price}}</span>
                  <van-button plain color="#ff8102" size="small">{{item.action}}</van-button>
                </div>
              </div>
            </van-cell-group>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="已完成" name="done">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          error-text="加载失败"
          @load="onLoad"
        >
          <div class="order-panel">
            <van-cell-group v-for="item in list" :key="item.id">
              <van-cell :title="item.number" :value="item.status" />
              <div class="order-main">
                <div class="order-main-top">
                  <span class="order-title">{{item.title}}</span>
                  <span class="order-time">{{item.time}}</span>
                </div>
                <p class="order-description">{{item.description}}</p>
                <div class="order-main-bottom">
                  <span class="order-price">¥{{item.price}}</span>
                  <van-button plain color="#90c0ef" size="small">{{item.action}}</van-button>
                </div>
              </div>
            </van-cell-group>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "all",
      allIsShow: false,
      doneIsShow: false,
      list: [],
      allList: [],
      noDoneList: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  mounted() {
    this.onAllLoad();
  },
  methods: {
    onLoad() {
      let that = this;
      setTimeout(() => {
        if (that.refreshing) {
          that.list = [];
          that.refreshing = false;
        }
        that.axios.get("/orderDoneData.json").then(response => {
          that.list = response.data;
          that.loading = false;
          this.finished = true;
        });
      }, 1000);
    },
    onNoDoneLoad() {
      let that = this;
      setTimeout(() => {
        if (that.refreshing) {
          that.noDoneList = [];
          that.refreshing = false;
        }
        that.axios.get("/orderNoDoneData.json").then(response => {
          that.noDoneList = response.data;
          that.loading = false;
          this.finished = true;
        });
      }, 1000);
    },
    onAllLoad() {
      let that = this;
      setTimeout(() => {
        if (that.refreshing) {
          that.allList = [];
          that.refreshing = false;
        }
        that.axios.get("/orderData.json").then(response => {
          that.allList = response.data;
          that.loading = false;
        });
        if (this.allList.length > 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    onAllRefresh() {
      this.finished = false;
      this.loading = true;
      this.onAllLoad();
    },
    onNoDoneRefresh() {
      this.finished = false;
      this.loading = true;
      this.onNoDoneLoad();
    },
    fixedTop(scrollTop, isFixed) {
      console.log(scrollTop, isFixed);
      this.$refs.tabs.isFixed = true;
    },
    loadData(name) {
      switch (name) {
        case "done":
          this.list = [];
          this.onRefresh();
          break;
        case "all":
          this.allList = [];
          this.onAllRefresh();
          break;
        case "noDone":
          this.noDoneList = [];
          this.onNoDoneRefresh();
          break;

        default:
          break;
      }
    }
  }
};
</script>
<style lang="less"  >
.order-view {
  background-color: #efefef;
  height: calc(100% - 50px);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: scroll;

  .van-tabs__line {
    background-color: #426496;
  }

  .order-panel {
    margin: 10px 8px 0 8px;
    .van-cell-group {
      margin-bottom: 10px;
    }

    .van-cell__title,
    .van-cell__value {
      font-size: 13px;
      color: #a6a6a6;
    }
    .van-cell__title {
      flex: 1.5;
    }
    .van-cell__value {
      flex: none;
    }
    .order-title {
      font-size: 15px;
      color: #383838;
      font-weight: bold;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      flex: 0.9;
    }
    .order-time {
      font-size: 12px;
      color: #a6a6a6;
      line-height: 20px;
    }
    .order-description {
      font-size: 13px;
      color: #505050;
    }
    .order-price {
      font-size: 14px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .order-main {
      padding: 10px 16px;
      .order-main-top,
      .order-main-bottom {
        display: flex;
        justify-content: space-between;
        align-content: center;
      }
    }
  }
}
</style>
